<script>
import { createNamespacedHelpers } from 'vuex'
import { navTo } from '@/utils'

const { mapState, mapActions } = createNamespacedHelpers('MyOrders')

export default {
  name: 'my-orders',
  data: () => ({
    tabs: [{ text: '未支付', id: 1 }, { text: '已支付', id: 2 }, { text: '历史订单', id: 3 }],
    currTabId: 1,
    showLoading: false
  }),
  computed: { ...mapState(['ordersUnpaid', 'ordersPaid', 'ordersHistory']) },
  methods: {
    ...mapActions(['getOrders', 'getMoreOrders', 'cancelOrder', 'repayOrder']),
    handleTab(id) {
      this.currTabId = id
    },

    handleCancelOrder(orderNumber) {
      wx.showModal({
        title: '提示',
        content: '是否取消该订单?',
        success: res => {
          console.log(res)
          if (res.confirm) {
            this.cancelOrder(orderNumber)
          }
        }
      })
    },

    handleGotoDetail(id) {
      navTo({ name: 'order-detail', query: { id } })
    },

    handleBoundary(event, code) {
      const type = event.type
      console.log('evetn type', type)
      if (!this.showLoading) {
        this.showLoading = true
        wx.showLoading({ title: '加载中...', mask: true })
        const fetch =
          type === 'scrolltoupper'
            ? this.getOrders
            : type === 'scrolltolower' ? this.getMoreOrders : null
        fetch &&
          fetch(code)
            .then(() => {
              this.showLoading = false
              wx.hideLoading()
            })
            .catch(msg => {
              this.showLoading = false
              wx.hideLoading()
              msg && console.error(msg)
            })
      }
    }
  },

  mounted() {
    this.getOrders(1)
    this.getOrders(2)
    this.getOrders(3)
  }
}
</script>

<template>
  <div class="my-orders">
    <div class="top-tabs">
      <span
        v-for="v in tabs"
        :key="v.id"
        class="tab"
        :class="{'active':v.id===currTabId}"
        @click="handleTab(v.id)"
      >{{v.text}}</span>
    </div>
    <div class="content-container">

      <!-- 未支付 -->
      <scroll-view
        id="unpaid"
        class="order-view"
        scroll-y
        :upper-threshold="-50"
        :lower-threshold="-50"
        @scrolltoupper="(e)=>handleBoundary(e,1)"
        @scrolltolower="(e)=>handleBoundary(e,1)"
        v-if="currTabId===1"
      >
        <block
          v-for="v in ordersUnpaid"
          :key="v.orderNumber"
          v-if="!!ordersUnpaid.length&&v.route"
        >
          <div
            class="order-item"
          >
            <div class="order-num">订单编号: {{v.orderNumber}}</div>
            <div class="content" @click="handleGotoDetail(v.orderNumber)">
              <img class="preview" :src="'https://source.hilval.com'+v.route.picture" mode="aspectFill">
              <div class="info">
                <p class="name">{{v.route.name}}</p>
                <!-- <p class="date">{{v.orderRoutePrice.thatDate}}</p>
                <p class="price">￥{{v.totalAmount}}</p> -->
                <div class="bottom-info">
                  <p class="date">{{v.orderRoutePrice.thatDate}}</p>
                  <p class="price">￥{{v.totalAmount}}</p>
                </div>
              </div>
            </div>
            <div class="ctrl-bar">
              <span class="ctrl-btn cancel" @click="()=>handleCancelOrder(v.orderNumber)">取消</span>
              <span class="ctrl-btn pay" @click="()=>repayOrder(v.orderNumber)">支付</span>
            </div>
          </div>
        </block>
      </scroll-view>

      <!-- 已支付 -->
      <scroll-view
        id="paid"
        class="order-view"
        scroll-y
        :upper-threshold="-50"
        :lower-threshold="-50"
        @scrolltoupper="(e)=>handleBoundary(e,2)"
        @scrolltolower="(e)=>handleBoundary(e,2)"
        v-if="currTabId===2"
      >
        <block
        v-for="v in ordersPaid"
        :key="v.orderNumber"
        v-if="!!ordersPaid.length&&v.route"
        >
          <div
            class="order-item"
          >
            <div class="order-num">订单编号: {{v.orderNumber}}</div>
            <div class="content" @click="handleGotoDetail(v.orderNumber)">
              <img class="preview" :src="'https://source.hilval.com'+v.route.picture" mode="aspectFill">
              <div class="info">
                <p class="name">{{v.route.name}}</p>
                <!-- <p class="date">{{v.orderRoutePrice.thatDate}}</p>
                <p class="price">￥{{v.totalAmount}}</p> -->
                <div class="bottom-info">
                  <p class="date">{{v.orderRoutePrice.thatDate}}</p>
                  <p class="price">￥{{v.totalAmount}}</p>
                </div>
              </div>
            </div>
          </div>
        </block>
      </scroll-view>

      <!-- 历史订单 -->
      <scroll-view
        id="history"
        class="order-view"
        scroll-y
        :upper-threshold="-50"
        :lower-threshold="-50"
        @scrolltoupper="(e)=>handleBoundary(e,3)"
        @scrolltolower="(e)=>handleBoundary(e,3)"
        v-if="currTabId===3"
      >
        <block
          v-for="v in ordersHistory"
          :key="v.orderNumber"
          v-if="!!ordersHistory.length&&v.route"
        >
          <div
            class="order-item"
          >
            <p class="order-num">订单编号: {{v.orderNumber}}</p>
            <div class="content" @click="handleGotoDetail(v.orderNumber)">
              <img class="preview" :src="'https://source.hilval.com'+v.route.picture" mode="aspectFill">
              <div class="info">
                <p class="name">{{v.route.name}}</p>
                <!-- <p class="date">{{v.orderRoutePrice.thatDate}}</p>
                <p class="price">￥{{v.totalAmount}}</p> -->
                <div class="bottom-info">
                  <p class="date">{{v.orderRoutePrice.thatDate}}</p>
                  <p class="price">￥{{v.totalAmount}}</p>
                </div>
              </div>
            </div>
            <p class="order-status">订单状态: {{v.routeProcessStatus}}</p>
          </div>
        </block>
      </scroll-view>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import './styles.scss';
</style>
